<!DOCTYPE html>
<html>

<head>
    <title>我的消息</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css">
    <script src="/js/plugins/dialog/dialog.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/message.css"/>
    <style type="text/css">
        .talk {
            background: #FFF;
            font-family: "微软雅黑";
            /*top: 10%;*/
            /*left: 50%;*/
            min-width:50px;
            max-width:70%;
            display: inline-block;
            padding: 10px;
            border-radius: 10px;
            background-color: #75d66c9c;
            box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
        }

        #inputDiv {
            height: 45px;
            width: 100%;
            background-color: #ddd;
            position: fixed;
            bottom: 0;
        }

        #msgHead {
            height: 40px;
            width: 100%;
            background-color: #4d4c4b;
            position: fixed;
            top: 0;
        }

        .theTime {
            text-align: center;
            margin:0 auto;
        }
        .welcome{
            text-align: center
        }
        .welcomeMsg{
            border-radius: 10px;
            background-color: #bdebee;
            box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
        }

        .submitBtn {
            background-color: #a6b4bc;
            color: white;
            width: 100%;
        }

        #face {
            font-size: 1.25rem;
            padding-top: 0px;
            padding-left: 1px;
            color: white;
            width: 100%;
        }
        .catalogs{
            margin-bottom:35%;
            margin-top:10%;
        }
    </style>
    <script>
        var msg1; //信息的主体模板(自己)
        var msg2; //信息的主体模板(对面)
        var link; //与服务器的连接对象
        var url = "ws://192.168.17.224/socket/letter";
        if ('WebSocket' in window) {
            link = new WebSocket(url); //建立连接
        } else if ('MozWebSocket' in window) {
            link = new MozWebSocket(url);
        } else {
            alert('WebSocket is not supported by this browser.');
        }

        //双方用户对象
        var user1 = JSON.parse(sessionStorage.getItem("user1"));
        var user2 = JSON.parse(sessionStorage.getItem("user2"));

        link.onopen = function (obj) {
            //向服务器发送敲门信息
            link.send("###&" + user1.id + "&" + user2.id);
        };

        link.onclose = function (obj) {
        };
        //接收到服务器传来信息的事件
        link.onmessage = function (obj) {
            var str = obj.data; //收到的信息
            var strs = str.split("&");
            console.log(strs);
            var msgDiv;
            //判断是我发的还是对面发的
            if(strs[1] == user1.id){
                //克隆一个我的信息对象
                msgDiv = msg1.clone(true);
                msgDiv.find(".talk").html(strs[0]);
                msgDiv.find(".time").html(strs[3]);
            }else if (strs[1] == user2.id){
                //克隆一个对面的信息对象
                msgDiv = msg2.clone(true);
                msgDiv.find(".talk").html(strs[0]);
                msgDiv.find(".time").html(strs[3]);
            }
            msgDiv.appendTo(".detail"); //把渲染好的信息显示到界面上
            scrollToEnd();
        };
        //监听私信
        var listen;
        var url = "ws://192.168.17.224/socket/listen";
        var theUser = sessionStorage.getItem("user");
        theUser = JSON.parse(theUser);
        var user1Id;
        var user2Id;
        if (theUser){
            if ('WebSocket' in window) {
                listen = new WebSocket(url); //建立连接
            } else if ('MozWebSocket' in window) {
                listen = new MozWebSocket(url);
            } else {
                alert('WebSocket is not supported by this browser.');
            };
            console.log("接收私信");

            listen.onopen = function (obj) {
                listen.send(""+theUser.id);
            };
            listen.onmessage = function (obj) {
                //$("#myModal").modal('hide');
                var str = obj.data; //收到的信息
                var strs = str.split("&");
                user1Id = strs[2];
                user2Id = strs[1];
                var user1Name;
                if (user2Id != user2.id) {
                    if (sessionStorage.getItem(user2Id)) {
                        sessionStorage.setItem(user2Id,sessionStorage.getItem(user2Id) + 1);
                    }else{
                        sessionStorage.setItem(user2Id,1);
                    };
                    $("#msgNum").html(sessionStorage.getItem(user2Id).length);
                    $.get("/users/" + strs[1], function (data) {
                        //user1Name = data.nickName;
                        $("#source").html(data.nickName);
                    });
                    //$("#source").html(user1Name);
                    $("#myModal").modal("show");
                }
            };
        }else  {
            console.log("未登录");
        };
        $(function () {
            $("#push").load("/pushModal.html");
        });

        function openMsg() {
            //向服务器发送开启私信的请求
            sessionStorage.setItem(user2Id,"");
            $.get("/letters/" + user1Id + "/" + user2Id,function (data) {
                var user1 = JSON.stringify(data.user1);
                var user2 = JSON.stringify(data.user2);
                sessionStorage.setItem("user1",user1);
                sessionStorage.setItem("user2",user2);
                location.href = "/mine/letter.html";
            })
        }
        $(function () {
            //头像渲染到主体模板上
            $(".user1Head").attr("src",user1.headImgUrl);
            $(".user2Head").attr("src",user2.headImgUrl);
            $("#title").html(user2.nickName);
            //准备信息主体单元
            msg1 = $("#msg1").clone(true);
            msg2 = $("#msg2").clone(true);
            $(".submitBtn").click(function () {  //发送按钮绑定点击事件
                var msg = $("#msg").val();
                if (msg){
                    if (msg.length > 20){
                        $(document).dialog({
                            type : "notice",
                            infoText: "字数太多了兄嘚!最多20字 (╬▔皿▔)凸",
                            autoClose: 1500,
                            position: "bottom"
                        });
                    }else {
                        msg = msg + "&" + user1.id + "&" + user2.id;
                        link.send(msg);  //调用连接对象,向服务器发送信息
                        $("#msg").val("");
                    }
                }else {
                   /* $(document).dialog({
                        type : "notice",
                        infoText: "请输入消息内容喔 ＞﹏＜",
                        autoClose: 1500,
                        position: "bottom"
                    });*/
                }
            })
        });
        function scrollToEnd(){//滚动到底部
            var h = $(document).height()-$(window).height();
            $(document).scrollTop(h);
        };
        function change() {
            if ($("#msg").val()){
                $(".submitBtn").css("background-color","#6665cc");
            }else {
                $(".submitBtn").css("background-color","#a6b4bc");
            }
        };
    </script>
</head>
<body>

<!--信息模板-->
<div style="display: none;">
    <div id="msg1">
        <div>
            <span style="height: 5px">&nbsp;&nbsp;&nbsp;</span>
            <p></p>
        </div>
        <div class="theTime">
            <span style="height: 10px;background-color: #d6d6d6" class="time">15:22</span>
            <p></p>
        </div>
        <div>
            <div class="msg">
                <img src="/111.png" width="50px" class="rounded-circle user1Head" style="float: right">
                <div class="talk" style="float: right;margin-right:20px"></div>
            </div>
        </div>
        <div>
            <span style="height: 5px">&nbsp;&nbsp;&nbsp;</span>
            <p></p>
        </div>
    </div>
    <div id="msg2">
        <div>
            <span style="height: 5px">&nbsp;&nbsp;&nbsp;</span>
            <p></p>
        </div>
        <div class="theTime">
            <span style="height: 10px;background-color: #d6d6d6" class="time">15:22</span>
            <p></p>
        </div>
        <div>
            <div class="msg">
                <img src="/111.png" width="50px" class="rounded-circle user2Head">&nbsp;&nbsp;&nbsp;
                <div class="talk" style="right: 20%;background-color: #d6d6d6"></div>
            </div>
        </div>
    </div>
</div>


<div id="msgHead">
    <div class="row nav-search">
        <div class="col-2">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col-7">
            <h5 id="title" style="color: #e9ecef">我的消息</h5>
        </div>
        <div class="col-3">
        </div>
    </div>
</div>

<div class="catalogs">
    <div>
        <div class="container detail">
            <div class="welcome">
                <div class="welcomeMsg">现在你们可以发送信息聊天啦</div>
                <p></p>
            </div>
            <!--信息体-->
        </div>
    </div>
</div>

<div id="inputDiv">
    <div class="row nav-search">
        <div class="col-1">
            <button type="button" id="face" class="btn btn-sm badge-pill">😀</button>
        </div>
        <div class="col-8">
            <div class="input-group-sm search">
                <input id="msg" class="form-control searchBtn" placeholder="请输入信息" style="padding-top: 5px" oninput="change()">
            </div>
        </div>

        <div class="col-3">
            <div class="input-group-sm search">
                <button type="button" class="btn btn-sm badge-pill submitBtn">发送</button>
            </div>
        </div>
    </div>
</div>


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content" onclick="openMsg()">
            <div class="modal-header">
                <h6 style="color: #00bbd3">消息提醒~~ (oﾟvﾟ)ノ</h6>
            </div>
            <div class="modal-body">
                <i>&nbsp;&nbsp;</i><span style="color: red" id="source"></span><span>  给你发了&nbsp;<i id="msgNum" style="color: #007bff"></i>&nbsp;条私信&nbsp;点击查看吧</span>
            </div>
        </div>
    </div>
</div>
</body>
</html>